<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吉大树洞 - 用户登录</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="background"></div>
    <div class="container">
        <div class="form-container">
            <h1>用户登录</h1>
            <form id="loginForm">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" required>

                <label for="password">密码:</label>
                <input type="password" id="password" name="password" required>

                <button type="submit">登录</button>
            </form>
            <p>没有账号？<a href="register.html">注册</a></p>
        </div>
    </div>

    <script>
        // 登录逻辑
        document.getElementById('loginForm').addEventListener('submit', function (event) {
            event.preventDefault(); // 阻止表单默认提交行为

            // 获取用户输入
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            // 从 localStorage 获取用户信息
            const user = JSON.parse(localStorage.getItem(username));

            if (user && user.password === password) {
                alert('登录成功！');
                window.location.href = 'topics.html'; // 跳转到话题页面
            } else {
                alert('用户名或密码错误！');
            }
        });
    </script>
</body>
</html>